<template>
  <div class="wxSurveyPreview al-content">
    <div class="title-wapper">
      <i class="el-icon-arrow-left"/>
      <div class="title">{{ surveyTitle() }}</div>
    </div>
    <div v-if="currentIndex !=='-1'">
      <div class="survey overflow_y">
        <div v-for="(item,i) in pageList()" :key="i" v-if="allowPreview(item)">
          <div v-if="item.topic" style="margin-bottom:10px">
            <div class="title" :class="{'required':item.topic.required}">{{ topicTitle(item, i) }}</div>
            <el-input v-if="showElement(item,['input','textarea'])"
                      :type="elementType(item)"
                      :rows="4"
                      v-model="item.topic.answer"
                      resize="none"/>
            <!--选择题选项-->
            <div v-if="showElement(item,'radio')" class="operations">
              <div class="al-flex-row" v-for="(raido,i) in item.topic.operations" :key="i">
                <el-radio border v-model="item.topic.type" :label="raido.value">
                  <span v-if="raido.value !=='other'">{{ raido.label }}</span>
                  <!--    其他   -->
                  <el-input v-else class="other" v-model="radioValue" size="mini" placeholder="其他"/>
                </el-radio>
              </div>
            </div>
            <div v-if="showElement(item,'checkbox')" class="operations">
              <el-checkbox-group v-model="checkboxValues">
                <div class="al-flex-row" v-for="(raido,i) in item.topic.operations" :key="i">
                  <el-checkbox :label="raido.value" border>
                    <span v-if="raido.value !=='other'">{{ raido.label }}</span>

                    <!--     其他   -->
                    <el-input v-model="checkboxInputValue" v-else
                              class="check-box-other" size="mini" placeholder="其他"/>
                  </el-checkbox>

                </div>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div class="foot">
        <el-button type="primary">提交</el-button>
      </div>
    </div>

    <div v-else class="end">
      <div v-html="endPage.topic.endText"></div>
      <el-image v-if="endPage.topic.image" :src="endPage.topic.image.url" fit="fill"/>
    </div>
  </div>
</template>

<script>
import {isArray} from "@/utils/validate";

export default {
  name: "wxSurveyPreview",
  props: {
    survey: Array,
    currentIndex: [String]
  },
  watch: {
    currentIndex: function (v) {
      if (v === '-1') {
        this.endPage = this.pageList()[0]
        console.log('page 变化...', this.endPage)
      }
    },
    survey: function (v) {
      console.log('preview 数据发生变化', JSON.stringify(v))
      this.page = v
    }
  },
  data() {
    return {
      // 只是预览效果，并没有其他作用
      radioValue: '',
      checkboxInputValue: '',
      checkboxValues: [],
      background: 'https://img1.dxycdn.com/2022/0727/354/3111243462754742653-2.png?v=1658906496',
      page: this.survey,
      endPage: {}
    }
  },
  methods: {
    surveyTitle() {
      if (!this.page.length) return ''
      return this.page[0].topic ? this.page[0].topic.title : ''
    },
    pageList() {
      let index = parseInt(this.currentIndex)
      return this.page.filter(s => s.page === index)
    },
    allowPreview(row) {
      return !['sTitle', 'sNotice'].includes(row.type)
    },
    topicTitle(row, index) {
      if (!row.topic) return ''
      return row.topic.title
    },
    showElement(row, type) {
      if (isArray(type)) {
        return type.includes(row.type)
      }
      return row.type === type
    },
    elementType(row) {
      let type = row.type
      if (type === 'input') return 'text'
      if (type === 'textarea') return 'textarea'
    }
  }
}
</script>

<style scoped lang="scss">
.wxSurveyPreview {
  height: 100%;
  position: relative;
  background: #7ad9f1;
  //background: #ffe8cc;

  .title-wapper {
    display: flex;
    line-height: 23px;
    align-items: center;

    .title {
      flex: 1;
      text-align: center;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .survey {
    margin-top: 2px;
    padding: 10px;
    height: 424px;
    border-radius: 10px;
    background-color: #fff;

    .title {
      font-size: 0.8em;
      margin-bottom: 10px;
    }

    .required::before {
      content: '*';
      color: #f12323;
      margin: 0 4px;
    }

    .operations {
      display: flex;
      flex-direction: column;

      .other {
        transform: translateY(-6px);
      }

      .check-box-other {
        transform: translateY(-5px);
      }

      .other, .check-box-other {
        margin: 0;

        ::v-deep.el-input__inner {
          border: none;
          padding: 4px;
        }
      }

      .el-radio, .el-checkbox {
        margin-bottom: 8px;
        display: flex;
        width: 100%;
      }

      ::v-deep.el-radio.is-bordered.is-checked,
      ::v-deep.el-checkbox.is-bordered.is-checked {
        border-color: #fa8409;
        background: #f6d1ab;
      }

      ::v-deep.el-radio__input.is-checked .el-radio__inner,
      ::v-deep.el-checkbox.is-bordered.is-checked.el-checkbox--medium .el-checkbox__inner {
        background: #fa8409;
        border-color: #fa8409;
      }

      ::v-deep.el-radio__input.is-checked .el-radio__inner {
        background: #fff;
      }

      ::v-deep.el-radio__input.is-checked .el-radio__inner::after {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        background: #fa8409;
        width: 7px;
        height: 7px;
      }

      ::v-deep.el-radio__input.is-checked + .el-radio__label,
      ::v-deep.el-checkbox.is-bordered.is-checked.el-checkbox--medium .el-checkbox__label {
        color: #fa8409;
      }
    }
  }
}

.foot {
  background-color: #fff;
  border-top: 1px solid #ccc;
  padding: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}


.end {
  //background: url("https://img1.dxycdn.com/2022/0727/354/3111243462754742653-2.png?v=1658906496") no-repeat;
  margin-top: 10px;
  border-radius: 10px;
  background-size: contain;
  height: calc(100% - 50px);
  width: 100%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #858484;

  div {
    white-space: pre-wrap;
    padding: 4px;
    font-size: 14px;
  }

  ::v-deep.el-image {
    margin-top: 10px;
    width: 200px;
    height: 200px;
  }
}
</style>
